var curDate = new Date();
var startValue = 0; //显示当前时区
var xAxis_data;
var min_zoom = 5;


function set_speed(xdata, threadId) {
  var myChart_wid = echarts.init(document.getElementById('t1' + threadId));
  option = {
    dataZoom: [{
      startValue: xdata[xdata.length - 10]
    },
    {
      type: 'inside'
    }],
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: xdata.map(item => { return item[1] }),
        type: 'line'
      }
    ]
  };
  option && myChart_wid.setOption(option);
}


//横坐标的线程
function getDataZoom(xdata) {
  let xlen = xdata.length
  let pre = null;
  for (let i = 0; i < xlen; i++) {
    let item = xdata[xlen - i - 1]
    if (i < min_zoom) {
      pre = item
      continue;
    }
    if (item == pre) {
      pre = item
      continue;
    }
    return item
  }
}
function getxAxisData(data) {
  return data.map(item => {
    return item[0]
  });
}

function getSeriesData(data, time, names) {
  var x_num = data.length
  var series = [];
  var markLine = {
    silent: true,
    lineStyle: { color: '#333' },
    data: [{ yAxis: 45, }, { yAxis: 50 }, { yAxis: 56 }, { yAxis: 58 }, { yAxis: 60 }, { yAxis: 65 }, { yAxis: 70 }, { yAxis: 75 }, { yAxis: 80 }, { yAxis: 85 }, { yAxis: 90 }]
  }
  for (let index = 0; index < x_num; index++) {
    if (index != 0) {
      let obj = {
        name: 'nvme' + index,
        type: 'line',
        smooth: true,
        // 提取Y轴坐标值
        data: data.map(function (item) {
          return item[index];
        }),
      }
      if (index == x_num - 1) {
        obj.markLine = markLine
      }
      series.push(obj);
    }
  }
  return series;
}

var myChart = echarts.init(document.getElementById('main'));
myChart.resize({
  width: document.body.offsetWidth,
});
function getNames() {
  let data = [];
  for (var i = 1; i <= 12; i++) {
    data.push("nvme" + i);
  }
  return data
}
function set_echat(data, time) {
  // 基于准备好的dom，初始化echarts实例
  var names = getNames();
  var series = getSeriesData(data, time, names)
  xAxis_data = getxAxisData(data)
  startValue = getDataZoom(xAxis_data)

  // 指定图表的配置项和数据
  var option = {
    // title: {
    //   text: '温度示波图 ℃',
    //   left: '1%',
    //   padding: [20,20,100,100],
    //   textStyle: {
    //       fontWeight: 'normal',
    //       color: '#fff',
    //   }
    // },
    tooltip: {
      text:"asdfasdfasfd",
      trigger: 'axis',
      fontSize:"10px",
      position: ["auto", "auto"],
      axisPointer: {
        type: 'cross',
        animation: false,
        label: {
          backgroundColor: '#505765'
        },
        lineStyle: {
          type: 'dashed'
        }
      },
      formatter: function(params){
        let newParams = [];
        let tooltipString = [];
        newParams = [...params];
        newParams.sort((a,b) => {return b.value - a.value});
        newParams.forEach((p) => {
          const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>';
          tooltipString.push(cont);
        });
        return tooltipString.join('');
      }
    },
    legend: {
      // orient: "vertical",
      // backgroundColor: "rgba(0,0,0,0.2)",
      borderColor: "#0f0",
      left:"center",
      top:"top",
      itemGap:15,
      itemWidth:10,
      data: names
    },
   
    grid: {
      left: '5%',
      right: '15%',
      bottom: '10%'
    },
    xAxis: {
      //提取X坐标值
      type: 'category',
      data: xAxis_data
    },
    yAxis: {
      scale: true
    },
    // toolbox: {
    //   right: 10,
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    dataZoom: [
      {
        startValue
      },
      {
        type: 'inside'
      }
    ],
    visualMap: {
      top: 60,
      right: -15,
      pieces: [
        {
          gt: 20,
          lte: 50,
          color: '#006600'
        },
        {
          gt: 50,
          lte: 55,
          color: '#006600'
        },
        {
          gt: 55,
          lte: 60,
          color: '#93CE07'
        },
        {
          gt: 60,
          lte: 65,
          color: '#FC7D02'
        },
        {
          gt: 65,
          lte: 70,
          color: '#AA069F'
        },
        {
          gt: 70,
          lte: 75,
          color: '#0000ff'
        },
        {
          gt: 75,
          lte: 80,
          color: '#AC3B2A'
        },
        {
          gt: 80,
          color: '#AC3B2A'
        }
      ],
      outOfRange: {
        color: '#999'
      }
    },
    series
  }
  myChart.setOption(option);
}
var request = function (success, url) {
  var ajax = new XMLHttpRequest();
  ajax.open('get', url);
  ajax.send();
  ajax.onreadystatechange = function (res) {
    if (ajax.readyState == 4 && ajax.status == 200) {
      success(res)
    }
  }
}

request(res => {
  var resMap = JSON.parse(res.target.response)
  set_echat(resMap, 1)
}, '/getlist')


var real_time;
var sped_time;
function startTime() {
  real_time = setInterval(function () {
    request(res => {
      var resMap = JSON.parse(res.target.response)
      set_echat(resMap, 2)
    }, '/getlist')
  }, 3000)

  sped_time = setInterval(function () {
    // for(let i = 0; i < 4; i++) {
    //   request(res=>{
    //     var resMap = JSON.parse(res.target.response)
    //     set_speed(resMap, i)
    //   }, '/getIoSpeed/'+i)
    // }
  }, 5000)
}

startTime()


function clearTime() {
  clearInterval(real_time)
  clearInterval(sped_time)
}
